<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table测试</title>
</head>
<style>
.divMain{
	position: relative;width: 100%;
	}
.divTable{
	margin-left: auto;
margin-right: auto;
width: 80%;
	}
.table{
	border-collapse: collapse;
border: 1px solid #ddd;
width: 100%;
max-width: 100%;
}
td {
  border-color: rgb(221, 221, 221);
  
}
tr:hover{
	background-color:#f5f5f5;
	}
tr:nth-child(2n+1){
		background-color:#f9f9f9;
	}
.input-fo {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555;
  display: block;
  font-size: 14px;

  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  vertical-align: middle;

}
.input-fo:focus{
	border-color: #66afe9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
outline: 0 none;
}

.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-change {
  background-color: #fff;
  border-color: #ccc;
  color: #333;
}
.btn-change:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333;
}
.btn-change:active {
background-image: none;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
outline: 0 none;
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
.yuan {
  background-color: yellow;
  border-radius: 50%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  width: 50px;
}
</style>
<body>
<div class="divMain">
<div class="divTable">
<table border="1"  class="table">
  <tr>
    <td>DIV居中 margin-left: auto;margin-right: auto;</td>
    <td>表格边框合并：border-collapse: collapse;</td>
    <td>边框颜色（包括Table[border: 1px solid #ddd;]的和TD的[border-color: rgb(221, 221, 221);]）</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>伪类选择器:[nth-child(2n+1)],IE中目前需要9以上才支持</td>
    <td>&nbsp;<input name="" type="text" class="input-fo" /></td>
    <td>&nbsp; <button type="button" class="btn btn-change">默认</button></td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;<div class="yuan">圆形</div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</div>
</body>
</html>
